import React, { Component } from 'react'
import { Route, Redirect, Switch } from 'react-router-dom'

import ReactLoadable from 'react-loadable'

var Home = ReactLoadable({
    loader: () => import('../components/Home/Home'),
    loading: () => <div className="loading">loading...</div>
});
var Shop = ReactLoadable({
    loader: () => import('../components/Shop/Shop'),
    loading: () => <div className="loading">loading...</div>
});
var My = ReactLoadable({
    loader: () => import('../components/My/My'),
    loading: () => <div className="loading">loading...</div>
});
var Collect = ReactLoadable({
    loader: () => import('../components/Collect/Collect'),
    loading: () => <div className="loading">loading...</div>
});
var AddressList = ReactLoadable({
    loader: () => import('../components/AddressList/AddressList'),
    loading: () => <div className="loading">loading...</div>
});
var Add = ReactLoadable({
    loader: () => import('../components/Add/Add'),
    loading: () => <div className="loading">loading...</div>
});
var Edit = ReactLoadable({
    loader: () => import('../components/Edit/Edit'),
    loading: () => <div className="loading">loading...</div>
});



export default class Router extends Component {
    render() {
        return (
            <Switch>
                <Route path="/home" component={Home}></Route>
                <Route path="/shop" component={Shop}></Route>
                <Route path="/my" component={My}></Route>
                <Route path="/collect" component={Collect}></Route>
                <Route path="/addresslist" component={AddressList}></Route>
                <Route path="/add" component={Add}></Route>
                <Route path="/edit" component={Edit}></Route>
                <Redirect to="/home"></Redirect>
            </Switch>
        )
    }
}
